@charset "utf-8";

.fn{
color:red;
font-size: 40px;
}
.xn{
	color:white
}
body{
	background: url("../img/bbbg.jpg");
	background-size: 100% 700px ;
	background-repeat: no-repeat;
	
}
.rb{
	/* 框，来承载图片 */
	width: 75px;
			height: 75px;
	
	background: url("../img/rbrid.png");
	background-size: 100% 100%;
	position: relative;
	top	:340px;	
	left: 120px;
	animation: rb 1.5s linear  infinite;
	
	}
@keyframes rb{
	0%{
		top	:340px;
		left: 120px;
		background:url("../img/bear_4.png");
		background-size: 100% 100%;
	}
	25%{
		top	:260px;
		left: 240px;
		background:url("../img/rbrid.png");
		background-size: 100% 100%;
	}
	50%{
		top	:390px;
		left: 310px;
		background:url("../img/rbrid.png");
		background-size: 100% 100%;
		transform: rotate(400deg) 
	}
	75%{
		top	:258px;
		left: 444px;
		background:url("../img/rbrid.png");
		background-size: 100% 100%;
	}
	100%{
		top	:329px;
		left: 504px;
		background:url("../img/rbrid.png");
		background-size: 100% 100%;
	}
	
}
.bb{
	width: 70px;
			height: 70px;
		
			background: url("../img/bbrid.png");
			background-size: 100% 100%;
			position: relative;
			top	:270px;	
			left: 10px;
				animation: bb 2s linear  infinite;
}
@keyframes bb{
	0%{
		top	:270px;
		left: 10px;
		transform: scale(1.0);
	}
	20%{
		top	:170px;
		left: 120px;
		transform: scale(2.0);
		
	}
	40%{
		
		top: 139px;
		    left: 291px;
			transform: scale(3.0);
			
	}
	60%{
		top: 35px;
		    left: 478px;
			transform: scale(1.0);
	}
	80%{
		top: 120px;
		    left: 645px;
			transform: scale(.8);
		
	}
	100%{
		top: -4px;
		    left: 835px;
			transform: scale(.4);
}
}
.ybone{
	width: 40px;
			height: 40px;
		
			background: url("../img/yb1.png");
			background-size: 100% 100%;
			position: relative;
			top	:225px;	
			left: 220px;
				animation: ybone 2s linear  infinite;
}
@keyframes ybone{
	0%{
		top	:225px;
		left: 220px;
	}
	14.28%{
		top	:130px;
		left: 310px;
	}
	28.56%{
		top	:90px;
		left: 314px;
	}
	42.84%{
		top	:-140px;
		left: 450px;
	}
	57.12%{
		top	:-200px;
		left: 655px;
	}
	71.4%{
		top	:-15px;
		left: 800px;
	}
	85.68%{
		top	:140px;
		left: 850px;
	}
	100%{
		top	:235px;
		left: 880px;
	}
	
}

.ybtwo{
	width: 40px;
			height: 40px;
		
			background: url("../img/yb2.png");
			background-size: 100% 100%;
			position: relative;
			top	:186px;	
			left: 220px;
			animation: ybtwo 2s linear  infinite;
			
			
}
@keyframes ybtwo{
	0%{
		top	:186px;
		left: 220px;
	}
	25%{
		top	:110px;
		left: 300px;
	}
	50%{
		top	:105px;
				left: 345px;
	}
	75%{
		top	:110px;
				left: 390px;
	}
	100%{
top	:180px;
	left: 500px;
	}
}


